<template>
  <div
    ref="visit_app"
    class="visit-app"
    style="width: 100%; height: 80%"
    @mouseenter="mouseoveAl"
    @mouseleave="mouseleaveAl"
  ></div>
</template>

  <script>
import * as echarts from "echarts";
import { mapState } from "vuex";
import { cloneDeep } from "@/utils/loadash-es";
import Obj from "@/components//index/assetSituation/components/tableData/index";
export default {
  data() {
    return {
      chartInstance: null,
      totalNum: 0,
      startNum: 0,
      endNum: 7,
      loading: null,
      option: {
        color: ["#21ffeb", "#36adff"],
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left",
          },
          axisPointer: {
            type: "none",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },

        grid: {
          left: "3%",
          right: "0%",
          bottom: "5%",
          top: "10%",
          containLabel: true,
        },
        dataZoom: [
          {
            xAxisIndex: 0,
            show: false,
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 9, //
          },
        ],

        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            data: [],
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              color: "rgba(255,255,255,0.5)",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              lineStyle: {
                color: "#1a1f6d",
                width: 1,
              },
            },
            axisLabel: {
              show: true,
              color: "rgba(255,255,255,0.5)",
            },
          },
        ],

        series: [],
      },
      assetsArr: cloneDeep(Obj.assetsArr),
    };
  },
  props: {},
  computed: {
    ...mapState(["theme"]),
  },
  methods: {
    //划入
    mouseoveAl() {
      clearInterval(this.startInterval);
    },
    //划出
    mouseleaveAl() {
      this.startInterval();
    },
    initChart(data) {
      // 初始化对象
      this.chartInstance = echarts.init(this.$refs.visit_app, this.theme);

      this.getData(data);
      this.startInterval();
    },
    getData(val) {
      let data = [];
      let axis = [];
      let series = [];
      // 数组格式
      if (Array.isArray(val)) {
        data = val.map((item) => {
          return item.num;
        });
        axis = val.map((item) => {
          return item.orgName;
        });
        series = [
          {
            data: data,
            type: "bar",
            barWidth: 30,
            itemStyle: {
              opacity: 0.6,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00ffff",
                },
                {
                  offset: 1,
                  color: "transparent",
                },
              ]),
            },
          },
        ];
        this.option.xAxis[0].data = axis;
      } else {
        for (let key in val) {
          let newKey;
          switch (key) {
            case "secret":
              newKey = "涉密网";
              break;
            case "intranet":
              newKey = "内网";
              break;
            case "extranet":
              newKey = "外网";
              break;
            case "standAlone":
              newKey = "单机";
              break;
          }
          axis.push(newKey);
          let singleDataArr = [];
          for (let ck in val[key]) {
            singleDataArr.push(val[key][ck]);
          }

          series.push({
            name: newKey,
            type: "bar",
            stack: "total",
            barWidth: 30,
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: singleDataArr,
          });
        }
        this.option.xAxis[0].data = [
          "终端",
          "网络设备",
          "其他设备",
          "外部设备",
          "安全保密产品",
          "服务器",
          "软件系统",
          "移动存储介质",
        ];
      }
      this.option.series = series;

      this.chartInstance.setOption(this.option, true);
    },
    // 更新图表
    startInterval() {
      if (this.option.series.length > 9) {
        if (this.loading) {
          clearInterval(this.loading);
        }
        // let dataOption = cloneDeep(this.option);
        this.loading = setInterval(() => {
          if (
            Number(this.option.dataZoom[0].endValue) ===
            this.option.series.length - 1
          ) {
            this.option.dataZoom[0].endValue = 6;
            this.option.dataZoom[0].startValue = 0;
          } else {
            this.option.dataZoom[0].endValue++;
            this.option.dataZoom[0].startValue++;
          }
          // if (this.endNum <= this.option.series.length - 7) {
          //   dataOption.series = this.option.series.slice(
          //     this.startNum,
          //     this.endNum
          //   );
          //   dataOption.xAxis[0].data = this.option.xAxis[0].data.slice(
          //     this.startNum,
          //     this.endNum
          //   );
          //   this.startNum++;
          //   this.endNum++;
          // } else if (this.endNum < this.option.series.length) {

          //   dataOption.series = this.option.series
          //     .slice(this.startNum, this.endNum)
          //     .concat(
          //       this.option.series.slice(
          //         0,
          //         7 - (this.option.series.length - this.endNum)
          //       )
          //     );
          //   dataOption.xAxis[0].data = this.option.xAxis[0].data.concat(
          //     this.option.xAxis[0].data.slice(
          //       0,
          //       7 - (this.option.series.length - this.endNum)
          //     )
          //   );
          //   this.startNum++;
          //   this.endNum++;

          // }else{
          //   this.startNum=0;
          //   this.endNum=6;
          // }
          // this.chartInstance.setOption(dataOption);
          this.chartInstance.setOption(this.option);
          // this.updateChart();
        }, 3000);
      }
    },
  },
  mounted() {
    this.chartInstance = echarts.init(this.$refs.visit_app, this.theme);

    // // 添加随页面变化而变化
    window.addEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
  destroyed() {
    window.removeEventListener("resize", () => {
      this.chartInstance.resize();
    });
    clearInterval(this.loading);
  },
  watch: {
    theme(newValue, oldValue) {
      this.chartInstance.dispose();
      this.initChart();
    },
  },
};
</script>

  <style lang="scss" scoped>
.visit-app {
  width: 100%;
  height: 80%;
}
</style>
